<script setup>
import {ref,onMounted} from "vue"
import {router} from "../../router"
import { useRoute } from "vue-router" //接收传递的值

const route = useRoute()

const update_user_ref = ref(null)

onMounted(()=>{
    console.log(route.query)
    document.title = "我的空间 - EvenSO"
    console.log("my space route",route.query)
})

const move1Enter = async() => {
    update_user_ref.value.style.opacity = 1
}
const move1Leave = async() => {
    update_user_ref.value.style.opacity = 0
}
const goToHome = ()=> {
    router.push({
        path: '/account/home',
        query: {
            image: route.query.image,
            name: route.query.name
        }
    })
}
</script>

<template>
    <!-- <div>我的页面</div> -->
    <div class="dialogBox"></div>
    <div class="myTitleMessageBox">
        <!-- {{ this.$route.query }} -->
        <div class="titleBox" :style="{backgroundImage:`url(${this.$route.query.back})`}">
            <img :src="this.$route.query.image" alt="" class="myImage"/>
            <span class="myName">{{ this.$route.query.name }}</span>
            <span class="myUid">uid:&nbsp;&nbsp;{{ this.$route.query.uid }}</span>
        </div>
    </div>
    <div>
        <div class="func1Box"></div>
    </div>
    <div class="updateUserImage" ref="update_user_ref" 
    @mouseenter="move1Enter" @mouseleave="move1Leave"
    @click="goToHome">
        <span>更换头像</span>
    </div>
</template>

<style scoped>
.dialogBox{
    position: absolute;
    left: 0;
    top: 0;
    width: 1855px;
    height: 55px;
    z-index: 1;
    background-color: skyblue;
}
.myTitleMessageBox{
    position: absolute;
    left: 0;
    top: 55px;
    width: 1855px;
    height: calc(100%);
    /* background-color: red; */
    display: flex;
    justify-content: center;
}
.myImage{
    position: absolute;
    left: 22%;
    top: 7%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.titleBox{
    width: 60%;
    height: 20%;
    user-select: none;
    background-repeat: no-repeat;
}
.myName{
    position: absolute;
    left: 29%;
    top: 8%;
}
.myUid{
    position: absolute;
    left: 29%;
    top: 15%;
    color: rgba(100, 100, 100, 0.8);
}

.func1Box{
    position: absolute;
    left: 371px;
    top: 26%;
    width: 1113px;
    height: 80px;
    user-select: none;
    background-repeat: no-repeat;
    background-color: red;
}
.updateUserImage{
    position: absolute;
    left: 408px;
    top: 120px;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    border-radius: 50%;
    opacity:0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.updateUserImage span{
    color: #fff;
}
</style>